<#include "../../inc/inc.ftl"/>
<@html title_='登录' css_=['life/user/login.css'] script_=['life/user/login.js']>
<body class="loginBody">
    <#--<video class="video-player" preload="auto" autoplay="autoplay" loop="loop" data-height="1080" data-width="1920" height="1080" width="1920">
        <source src="http://ob2dt6f5q.bkt.clouddn.com/login.mp4" type="video/mp4">
    </video>-->

    <#--<div class="video_mask"></div>-->
    <div class="login">
    <h1>管理后台登录</h1>
    <form class="layui-form" id="loginForm" action="/login" method="post">
        <div class="login_face"><img src="${root}/images/life/life.png" class="userAvatar"></div>
        <div class="layui-form-item">
            <input class="layui-input" name="username" id="username" placeholder="用户名" lay-verify="required" type="text" autocomplete="off">
        </div>
        <div class="layui-form-item">
            <input class="layui-input" name="password" id="password" placeholder="密码" lay-verify="required" type="password" autocomplete="off">
        </div>
        <div class="layui-form-item form_code">
            <input class="layui-input" name="code" id="imageCode"  placeholder="验证码" lay-verify="required" type="text" autocomplete="off">
            <div class="code" id="imageCodeImg"><img src="${root}/api/captcha?key=adminImageCode" width="116" height="36"></div>
        </div>
        <button class="layui-btn login_btn" id="btn" lay-submit="" lay-filter="login">登录</button>
    </form>
</div>
</body>
<script>
    $("#imageCodeImg").click(function(){
        $(this).find("img").attr("src", "${root}/api/captcha?key=adminImageCode");
    });
    $(document).keydown(function (e) {
        if (e.keyCode == 13) {
            check();
        }
    });

    function check() {
        disableBtn();
        var time=1200;
        var username = $("#username").val();
        var password = $("#password").val();
        if (!username) {
            layer.msg("请输入用户名111!", {icon: 5,time:time});
            setTimeout(function () {
                removeDisable();
            },time)
            return;
        }
        if (!password) {
            layer.msg("请输入密码!", {icon: 5,time:time});
            setTimeout(function () {
                removeDisable();
            },time)
            return;
        }
        if (!checkCode()) {
            layer.msg("验证码错误!", {icon: 5,time:time});
            setTimeout(function () {
                removeDisable();
            },time)
            return;
        }
        var optionsPost = {
            dataType: "json",
            success: function (data) {
                console.log(data)
                if(data.status==200){
                    window.location.href="/m";
                }else{
                    layer.msg(data.message, {icon: 5,time:time});
                    setTimeout(function () {
                        removeDisable();
                    },time)
                }
            },
            error: function (e) {
                removeDisable();
            }
        };
        $("#loginForm").ajaxSubmit(optionsPost);
    }

    function checkCode() {
        var check = false;
        var code = $("#imageCode").val();
        if (!code && code.length != 4) {
            return check;
        }
        var options = {
            url: '${root}/api/captcha/check?key=adminImageCode&value=' + code,
            async: false,
            success: function (data) {
                if (data == '1') {
                    check = true;
                }
            }
        };
        $.ajax(options);
        return check;
    }

    function disableBtn() {
        $("#btn").attr("disabled","disabled");
    }

    function removeDisable() {
        $("#btn").removeAttr("disabled");
    }
</script>
</@html>
